<template>
	<view>
		<view class="main-container">
			<view class="top-img-view">
				<image
					mode="widthFix" 
					src="../../static/one_button_alarm_bg.png" 
					class="top-img"></image>
			</view>
		
			<view class="card-view pos-view">
					<view class="pos-top">
						<view class="title">当前位置(仅供参考)</view>
						<div class="right" @click="getLocation">
							<uni-icons type="loop" color="#AEAEAE"></uni-icons>
							<view class="refresh-text">{{getLocationInfoText}}</view>
						</div>
					</view>
					<view class="pos-name">{{currentLocation}}</view>
			</view>
		
			<view class="card-view" v-if="showOrderInfo">
				<view class="info-row">
					<view class="name">服务项目</view>
					<view class="value">{{orderInfo.serviceItem}}</view>
				</view>
				<view class="info-row">
					<view class="name">订单编号</view>
					<view class="value">{{orderInfo.orderNum}}</view>
				</view>
				<view class="info-row">
					<view class="name">就诊人</view>
					<view class="value">{{orderInfo.visitor}}</view>
				</view>
				<view class="info-row">
					<view class="name">服务项目</view>
					<view class="value">{{orderInfo | orderItemInfos}}</view>
				</view>
				<view class="info-row">
					<view class="name">服务时间</view>
					<view class="value">{{orderInfo.setOutTime}}</view>
				</view>
			</view>
			
			<view class="card-view empty-order-info" @click="showPopup" v-if="showEmptyCard">
				<view class="title">服务订单</view>
				<view class="empty-view">暂无进行中订单</view>
			</view>
			
			<view class="card-view bottom-tip">
				<view class="title">当你报警后，系统会执行的操作</view>
				<view class="item">通知紧急联系人，医院联系人等多种紧急措施</view>
			</view>
			
			<view class="submit-btn-view">
				<view class="submit-btn" @click="alarmRecordCreate">报警</view>
			</view>
			
			
		</view>
		
		<uni-popup 
			ref="popup" 
			type="bottom">
			<view class="popup-view">
				<!-- <view class="title">服务订单</view> -->
				<scroll-view scroll-y style="height: calc(100vh - 500rpx);">
					<radio-group @change="onPopupItemChange">
						 <view class="card-view popup-view-item" v-for="(item,index) in orderInfoList">
							 <view class="left">
								 <radio color="#2EB0D9" :value="JSON.stringify(item)"></radio>
							 </view>
							 <view>
								 <view class="info-row">
								 	<view class="name">服务项目</view>
								 	<view class="value">{{item.serviceItem}}</view>
								 </view>
								 <view class="info-row">
								 	<view class="name">订单编号</view>
								 	<view class="value">{{item.orderNum}}</view>
								 </view>
								 <view class="info-row">
								 	<view class="name">就诊人</view>
								 	<view class="value">{{item.visitor}}</view>
								 </view>
								 <view class="info-row">
								 	<view class="name">服务项目</view>
								 	<view class="value">{{item | orderItemInfos}}</view>
								 </view>
								 <view class="info-row">
								 	<view class="name">服务时间</view>
								 	<view class="value">{{item.setOutTime}}</view>
								 </view>
							 </view>
						 </view>
					</radio-group>
				</scroll-view>
			</view>
		</uni-popup>
		
		
		
	</view>
</template>

<script>
	import * as utils from '../../utils/utils.js'
	import * as orderInfo from '../../common/api/orderInfo.js'
	import * as alarmRecord from '../../common/api/alarmRecord.js'
	export default {
		data() {
			return {
				locationInfo:'',
				currentLocation:'',
				getLocationInfoText:'刷新当前位置',
				orderUid:'',
				orderInfo:'',
				orderInfoList:[],
				longitude:'',
				latitude:'',
			}
		},
		onLoad(opt) {
			if(opt.uid){
				this.orderUid = opt.uid
				this.getOrderInfo()
			}
			this.getlongitudeAndlatitude()
		},
		onShow() {
			if(!this.orderUid){
					this.getLocation()
			}
			// this.$nextTick(()=>{
			// 	if(!this.orderUid){
			// 		this.showPopup()
			// 	}
			// })
		},
		computed:{
			showOrderInfo(){
				return !!this.orderInfo
			},
			showEmptyCard(){
				return !this.orderInfo
			},
		},
		filters:{
			orderItemInfos(item){
				if(!item.itemInfos){
					return ''
				}
				return item.itemInfos.map(e => e.serviceItem).join('/')
			}
		},
		methods: {
			getLocation(){
				this.getLocationInfoText = '获取中...'
				uni.getLocation({
					type: 'wgs84',
					geocode:true,
					success: async (res)=>{
						console.log(JSON.stringify(res))
						let { longitude, latitude } = res
						this.longitude = longitude
						this.latitude = latitude
						const locationInfo = await utils.wxGetAddress({ longitude, latitude })
						console.log('locationInfo',locationInfo,JSON.stringify(locationInfo));
						this.locationInfo = locationInfo
						this.currentLocation = locationInfo.name
						this.getLocationInfoText = '刷新当前位置'
					},
					fail:(err)=>{
						console.log('getLocation error -> ',err);
						this.getLocationInfoText = '刷新当前位置'
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
					}
				})
			},
			getlongitudeAndlatitude(){
				uni.getLocation({
					type: 'wgs84',
					geocode:true,
					success: async (res)=>{
						console.log(JSON.stringify(res))
						let { longitude, latitude } = res
						this.longitude = longitude
						this.latitude = latitude
					},
					fail:(err)=>{
						console.log('getlongitudeAndlatitude error -> ',err);
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
					}
				})
			},
			getOrderInfo(){
				const param = {
					uid:this.orderUid
				}
				orderInfo.queryById(param).then(result => {
					this.orderInfo = result.data.data
					this.currentLocation = this.orderInfo.visitorAddress
				}).catch(error => {
					console.log(error);
				})
			},
			showPopup(){
				this.$refs.popup.open()
				this.getOrderList()
			},
			getOrderList(){
				const dataJson = uni.getStorageSync('user_info') || '{}'
				const data = JSON.parse(dataJson) || {}
				const param = {
					dispatchNursesUid:data.nurseUid,
					statusList:['服务中']
				}
				orderInfo.queryByPage(param).then(result => {
					this.orderInfoList = result.data.data.rows
				}).catch(error => {
					console.log(error);
				})
			},
			onPopupItemChange(e){
				console.log(e);
				this.$refs.popup.close()
				this.orderInfo = JSON.parse(e.detail.value)
				this.currentLocation = this.orderInfo.visitorAddress
			},
			alarmRecordCreate(){
				console.log(JSON.stringify(
					{
						orderNum:this.orderInfo.orderNum,
						lat:this.latitude,
						lng:this.longitude,
						address:this.currentLocation,
					}
				));
				if(!this.orderInfo){
					uni.showToast({
						icon:'none',
						title:'暂无进行中订单'
					})
					return
				}
				uni.showModal({
					title:'提示',
					content:'确认报警',
					success:(res)=>{
						if(res.confirm){
							const param = {
								orderNum:this.orderInfo.orderNum,
								lat:this.latitude,
								lng:this.longitude,
								address:this.currentLocation,
							}
							alarmRecord.create(param).then(result => {
								console.log(result);
								if(result.data.code != 200){
									uni.showToast({
										title:'报警错误:'+JSON.stringify(result.data),
										icon:'none'
									})
									return
								}
								uni.showToast({
									title:result.data.msg,
									icon:'none'
								})
							}).catch(error => {
								uni.showToast({
									title:'报警错误:'+JSON.stringify(error),
									icon:'none'
								})
								console.log(error);
							})
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.main-container{
	
}

.top-img-view{
	padding: 20rpx;
	box-sizing: border-box;
	.top-img{
		width: 100%;
	}
}

.card-view{
	margin-left: 20rpx;
	margin-right: 20rpx;
	background: white;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	.card-title{
		color: #232323;
		font-size: 30rpx;
		font-weight: bold;
	}
	.card-body{
		margin-top: 26rpx;
	}
}

.info-row{
	display: flex;
	align-items: center;
	min-height: 60rpx;
	.name{
		width: 200rpx;
		color: #232323;
		font-weight: bold;
		font-size: 30rpx;
	}
	.value{
		color: #232323;
		font-size: 30rpx;
		flex: 1;
	}
	.nav-btn{
		width: 96rpx;
		height: 48rpx;
		border: solid 2rpx #2EB0D9;
		border-radius: 24rpx;
		color: #2EB0D9;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.submit-btn-view{
	box-sizing: border-box;
	padding: 30rpx;
	.submit-btn{
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;
			background: #169BD5;
			color: white;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
	}
}

.pos-view{
	.pos-top{
		display: flex;
		align-items: center;
		.title{
			flex: 1;
		}
		.right{
			display: flex;
		}
		.refresh-text{
			color: #AEAEAE;
			margin-left: 5rpx;
		}
	}
	.pos-name{
		margin-top: 10rpx;
		font-size: 35rpx;
		font-weight: bold;
	}
}
.bottom-tip{
	.title{
		color: #242424;
		font-weight: bold;
	}
	.item{
		color: #A6A6A6;
	}
	.item::before{
    content: "";
    background-color: #A6A6A6;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    width: 8px;
    margin-right: 8px;
	}
}

.empty-order-info{
	.title{
		font-weight: bold;
	}
	.empty-view{
		width: 100%;
		height: 200rpx;
		background: #F5F6F8;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		margin-top: 10rpx;
		color: #D5D4D5;
	}
}

.popup-view{
	height: calc(100vh - 500rpx);
	background: white;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	.title{
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.popup-view-item{
		margin-left: 20rpx;
		margin-right: 20rpx;
		background: white;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left{
			margin-right: 10rpx;
		}
	}
}
</style>
